import React, { useEffect, useState } from 'react';
import { isEmpty } from 'lodash';
import { Image } from 'antd';
import { useModel } from 'umi';

import { TPL_TYPE, BOR_STYLE, BG_SET, IMGERROR, navsDataItem } from '..';
import styles from './index.less';

import type { NavigationValue } from '..';

interface INavigationViewProps {
  data: NavigationValue;
}

const NavigationView: React.FunctionComponent<INavigationViewProps> = (props) => {
  const { initialState } = useModel('@@initialState');
  const { imgPrefix } = initialState || {};

  // const navsData = [
  //   {
  //     imageUrl: 'https://img2.baidu.com/it/u=2144995484,1374826477&fm=253&fmt=auto&app=138&f=JPEG',
  //     title: '美食1',
  //   },
  //   {
  //     imageUrl: 'https://img2.baidu.com/it/u=2144995484,1374826477&fm=253&fmt=auto&app=138&f=JPEG',
  //     title: '美食2',
  //   },
  //   {
  //     imageUrl: 'https://img2.baidu.com/it/u=2144995484,1374826477&fm=253&fmt=auto&app=138&f=JPEG',
  //     title: '快餐3',
  //   },
  //   // {
  //   //   imageUrl: 'https://img2.baidu.com/it/u=2144995484,1374826477&fm=253&fmt=auto&app=138&f=JPEG',
  //   //   title: '快餐4',
  //   // },
  //   // {
  //   //   imageUrl: 'https://img2.baidu.com/it/u=2144995484,1374826477&fm=253&fmt=auto&app=138&f=JPEG',
  //   //   title: '快餐5',
  //   // },
  //   // {
  //   //   imageUrl: 'https://img2.baidu.com/it/u=2144995484,1374826477&fm=253&fmt=auto&app=138&f=JPEG',
  //   //   title: '美食6',
  //   // },
  //   // {
  //   //   imageUrl: 'https://img2.baidu.com/it/u=2144995484,1374826477&fm=253&fmt=auto&app=138&f=JPEG',
  //   //   title: '美食7',
  //   // },
  //   // {
  //   //   imageUrl: 'https://img2.baidu.com/it/u=2144995484,1374826477&fm=253&fmt=auto&app=138&f=JPEG',
  //   //   title: '快餐8',
  //   // },
  //   // {
  //   //   imageUrl: 'https://img2.baidu.com/it/u=2144995484,1374826477&fm=253&fmt=auto&app=138&f=JPEG',
  //   //   title: '快餐9',
  //   // },
  //   // {
  //   //   imageUrl: 'https://img2.baidu.com/it/u=2144995484,1374826477&fm=253&fmt=auto&app=138&f=JPEG',
  //   //   title: '快餐10',
  //   // },
  //   // {
  //   //   imageUrl: 'https://img2.baidu.com/it/u=2144995484,1374826477&fm=253&fmt=auto&app=138&f=JPEG',
  //   //   title: '快餐11',
  //   // },
  //   // {
  //   //   imageUrl: 'https://img2.baidu.com/it/u=2144995484,1374826477&fm=253&fmt=auto&app=138&f=JPEG',
  //   //   title: '快餐12',
  //   // },
  //   // {
  //   //   imageUrl: 'https://img2.baidu.com/it/u=2144995484,1374826477&fm=253&fmt=auto&app=138&f=JPEG',
  //   //   title: '快餐13',
  //   // },
  //   // {
  //   //   imageUrl: 'https://img2.baidu.com/it/u=2144995484,1374826477&fm=253&fmt=auto&app=138&f=JPEG',
  //   //   title: '快餐14',
  //   // },
  //   // {
  //   //   imageUrl: 'https://img2.baidu.com/it/u=2144995484,1374826477&fm=253&fmt=auto&app=138&f=JPEG',
  //   //   title: '快餐15',
  //   // },
  //   // {
  //   //   imageUrl: 'https://img2.baidu.com/it/u=2144995484,1374826477&fm=253&fmt=auto&app=138&f=JPEG',
  //   //   title: '快餐16',
  //   // },
  //   // {
  //   //   imageUrl: 'https://img2.baidu.com/it/u=2144995484,1374826477&fm=253&fmt=auto&app=138&f=JPEG',
  //   //   title: '快餐17',
  //   // },
  //   // {
  //   //   imageUrl: 'https://img2.baidu.com/it/u=2144995484,1374826477&fm=253&fmt=auto&app=138&f=JPEG',
  //   //   title: '快餐18',
  //   // },
  // ];

  const { tplType, bgSetting, bgRadius, borderStyle, navsData } = props.data;
  const [leftPercent, setLeftPercent] = useState(0);
  const [firstDistance, setFirstDistance] = useState<number>();
  const [navsBro, setNavsBro] = useState<any[]>([]);

  // 转化横向滚动时数组
  const handleNavs = () => {
    const topArr = [] as {
      imageUrl: string;
      title: string;
    }[];
    const bottomArr = [] as {
      imageUrl: string;
      title: string;
    }[];
    navsData.forEach((item, index) => {
      if (index < navsData.length / 2) {
        topArr.push(item);
      } else {
        bottomArr.push(item);
      }
    });
    return [topArr, bottomArr];
  };

  // 监听滚动条
  const scrollChange = () => {
    const element = document.getElementById('dotSwiper');
    const dotFather = document.getElementById('dotFather');
    if (element && dotFather) {
      const rect1 = element.getBoundingClientRect();
      const rect2 = dotFather.getBoundingClientRect();
      const restDistance = rect1.left - rect2.left - 367;
      if (isEmpty(firstDistance)) {
        setFirstDistance(restDistance);
      }
      setLeftPercent(28 - Number((restDistance / 10).toFixed(2)));
    }
  };

  useEffect(() => {
    setNavsBro(handleNavs());
  }, [navsData]);

  useEffect(() => {
    window.addEventListener('scroll', scrollChange, true);
    return () => {
      window.removeEventListener('scroll', scrollChange, false);
    };
  }, [tplType]);

  if (navsData.length === 0) {
    return (
      <div className={styles['goods-container']}>
        <h3 style={{ textAlign: 'center' }}>请添加导航</h3>
      </div>
    );
  }

  // return false ? (
  return tplType === TPL_TYPE.scroll.value ? (
    // 滑动模式
    <div
      style={{
        backgroundColor: bgSetting === BG_SET.whithBg.value ? 'white' : 'transparent',
        borderRadius: bgRadius,
        margin: borderStyle === BOR_STYLE.noBorder.value ? 0 : 10,
      }}
    >
      <div className={styles['rotate-body']}>
        {/* 自定义滚动条  大于10才会有 */}
        {navsData.length > 10 && (
          <div className={styles['scroll-father']}>
            <div
              className={styles['scroll-son']}
              style={{
                marginLeft:
                  leftPercent <= (navsData.length === 12 ? 27 : 20) ? 0 : leftPercent + '%',
              }}
            >
              {''}
            </div>
          </div>
        )}

        <div
          className={styles['new-ul']}
          style={{
            height: borderStyle === BOR_STYLE.noBorder.value ? 415 : 400,
          }}
          id="dotFather"
        >
          {/* navsBro--二维数组 */}
          {navsBro &&
            navsBro.length > 0 &&
            navsBro[0].map((item: any, index: number) => (
              <div className={styles['new-li']} key={'scroll' + index}>
                {navsBro[0][index] && (
                  <div>
                    <Image
                      key={'scroll0' + index}
                      draggable="false"
                      className={styles['nav-img']}
                      preview={false}
                      src={navsBro[0][index] ? imgPrefix + navsBro[0][index].imageUrl : IMGERROR}
                      fallback={IMGERROR}
                    />
                    <div className={styles['nav-title']}>{navsBro[0][index].title}</div>
                  </div>
                )}

                {navsBro[1][index] && (
                  <Image
                    key={'scroll1' + index}
                    draggable="false"
                    className={styles['nav-img']}
                    preview={false}
                    src={navsBro[1][index] ? imgPrefix + navsBro[1][index].imageUrl : IMGERROR}
                    fallback={IMGERROR}
                  />
                )}
                {navsBro[1][index] && (
                  <div className={styles['nav-title']}>{navsBro[1][index].title}</div>
                )}

                {/* 占位--监听滚动条的位置 */}
                {index === navsBro[0].length - 1 && (
                  <div id="dotSwiper" className={styles['dot-swiper']}>
                    {''}
                  </div>
                )}
              </div>
            ))}
        </div>
      </div>
    </div>
  ) : (
    // 标准模式
    <div
      className={styles['nav-body']}
      style={{
        padding: borderStyle === BOR_STYLE.noBorder.value ? 0 : 10,
      }}
    >
      <div
        className={styles['nav-line']}
        style={{
          backgroundColor: bgSetting === BG_SET.whithBg.value ? 'white' : 'transparent',
          borderRadius: bgRadius,
        }}
      >
        {navsData.map((item, index) =>
          index < 10 ? (
            <div
              className={styles['nav-solo']}
              key={'normal' + index}
              style={{
                marginBottom:
                  (index > 4 && navsData.length === 10) ||
                  (index > 3 && navsData.length === 8) ||
                  navsData.length < 6
                    ? 0
                    : 14,
                width: navsData.length === 8 ? 72 : 64,
              }}
            >
              <Image
                key={'normal' + index}
                draggable="false"
                className={styles['nav-img']}
                preview={false}
                src={item.imageUrl ? imgPrefix + item.imageUrl : IMGERROR}
                fallback={IMGERROR}
              />
              <div className={styles['nav-title']}>{item.title}</div>
            </div>
          ) : null,
        )}
      </div>
    </div>
  );
};

export default NavigationView;
